<!--城市选择器-->

<!--<template>
  <div class="w-h-full">
    &lt;!&ndash;组件遮罩层，用于在设计器中显示&ndash;&gt;
    <div v-if="shade" class="shade"></div>

    <v-region :type="component.compConfigData.type"
              :area="area"
              :city="city"
              :town="town"
              @values="onChangeHandler"
              :style="inputStyleObject"></v-region>
  </div>
</template>

<script>

  import Vue from 'vue'
  // 城市选择插件
  import vRegion from 'v-region'
  Vue.use(vRegion);

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'CitySelectComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '2.0',
      configDataTemp: Object.assign({

        type: 'group',
        selectModel: 'ssqj', // 选择模式：ssqj-省市区街，ssq-省市区，ss-省市，s-省
        inputStyle: {
          backgroundColor: '#757575',
          color: '#fff',
          borderWidth: 1,
          borderColor: '#2196f3'
        },

        onChangeCode: ''

      }, PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemChange', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('areaKey','', '区编号'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('areaValue','', '区名称'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('cityKey','', '市编号'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('cityValue','', '市名称'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('provinceKey','', '省份编号'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('provinceValue','', '省份名称'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('townKey','', '街道编号'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('townValue','', '街道名称')
        ])
      ]))
    },
    data() {
      return {
        value: ''
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      onChangeHandler (value) {
        this.value = value;
        let sendObj = {};
        if (this.component.compConfigData.type == 'city') {
          let cityKeys = [], cityValues = [];
          sendObj = {
            areaKey: '',
            areaValue: '',
            provinceKey: '',
            provinceValue: '',
            townKey: '',
            townValue: ''
          }
          value.forEach(item => {
            cityKeys.push(item.key);
            cityValues.push(item.value);
          })
          sendObj.cityKey = cityKeys;
          sendObj.cityValue = cityValues;
        }else {
          if (value.area) {
            sendObj.areaKey = value.area.key;
            sendObj.areaValue = value.area.value;
          }
          if (value.city) {
            sendObj.cityKey = value.city.key;
            sendObj.cityValue = value.city.value;
          }
          if (value.province) {
            sendObj.provinceKey = value.province.key;
            sendObj.provinceValue = value.province.value;
          }
          if (value.town) {
            sendObj.townKey = value.town.key;
            sendObj.townValue = value.town.value;
          }
        }
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemChange', sendObj)
        eval(this.component.compConfigData.onChangeCode)
      }

    },
    computed: {
      inputStyleObject () {
        return {
          '&#45;&#45;background-color': this.component.compConfigData.inputStyle.backgroundColor,
          '&#45;&#45;color': this.component.compConfigData.inputStyle.color,
          '&#45;&#45;border-width': this.component.compConfigData.inputStyle.borderWidth + 'px',
          '&#45;&#45;border-color': this.component.compConfigData.inputStyle.borderColor,
        }
      },
      area () {
        if (
          this.component.compConfigData.selectModel == 's' ||
          this.component.compConfigData.selectModel == 'ss'
        ) {
          return false
        }else {
          return true
        }
      },
      city () {
        if (
          this.component.compConfigData.selectModel == 's'
        ) {
          return false
        }else {
          return true
        }
      },
      town () {
        if (
          this.component.compConfigData.selectModel == 'ssq' ||
          this.component.compConfigData.selectModel == 'ss' ||
          this.component.compConfigData.selectModel == 's'
        ) {
          return false
        }else {
          return true
        }
      }
    }
  };

  export default _this
</script>

<style scoped>
  >>> .v-region {
    width: 100%;
  }
  >>> .rg-caller-container {
    width: 100%;
  }
  >>> .rg-default-btn {
    background-color: var(&#45;&#45;background-color);
    border: var(&#45;&#45;border-width) solid var(&#45;&#45;border-color);
    color: var(&#45;&#45;color);
    font-size: 13px;
    line-height: 1.45;
    width: 100%;
    text-align: left;
  }
  >>> .rg-default-btn .rg-iconfont {
    font-size: 13px;
  }
</style>-->
